<template>
  <view>
    <!--导航栏组件-->
    <!--    <navbar :isHome="true" ></navbar>-->
    <view style="margin-top: 180rpx; width: 100%;">
      <!-- 推荐添加小程序 -->
      <view class="weui-cell" style="background: #fff9eb; " >
        <view class="weui-cell__hd">
          <image src="@/static/resource/images/ic_myapp.png" style="display:block;width:40rpx;height:40rpx;margin-right:14rpx;"></image>
        </view>
        <view class="weui-cell__bd">
          <text style="color: #be9719;font-size: 13px;">点击右上角”添加到我的小程序“，方便下次找到</text>
        </view>
        <view class="weui-cell__ft">
          <image src="@/static/resource/images/modal_closer.png" style="display:block;width:40rpx;height:40rpx; margin-left:auto"></image>
        </view>
      </view>
    </view>
  </view>
  <!-- 轮播图 -->
  <view v-if="slides && slides.length > 0" class="index-swiper">
    <swiper autoplay = "true" circular :interval="4000" :duration="500" indicator-dots="true" >
      <block v-for="(item,index) in slides" :key="index">
        <swiper-item>
          <image :src="item.pic_image_url" mode="widthFix" show-menu-by-longpress :data-index="index"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

  <!-- 		两个快捷入口 -->
  <view v-if="nav2s && nav2s.length > 0 " class="nav2-list">
    <block v-for="(item,index) in nav2s" :key="index">
      <view class="nav2-item" @click="onNav2Tap" :data-index="index" >
        <view class="nav2-pic">
          <image :src="item.pic_image_url" mode="widthFix"></image>
        </view>
      </view>
    </block>
  </view>

  <!-- 		五个快捷入口 -->
  <view v-if="navs && navs.length > 0 " class="nav-list">
    <block v-for="(item,index) in navs" :key="index">
      <view class="nav-item" @click="onNavTap" :data-index="index">
        <view class="nav-pic"><image :src="item.pic_image_url"></image></view>
        <view class="nav-text" :style="'color:'+(item.color ? item.color : '')">{{item.title}}</view>
      </view>
    </block>
  </view>

  <!-- 医院列表 -->
  <view class="weui-cells hosp-list">
    <view class="weui-cell hosp-item weui-cell_access" v-for="(item,index) in hospitals" :key="item.id" :data-hid="item.id" @click="toHospitals">
      <view class="weui-cell_hd">
        <image class="hosp-avatar" :src="item.avatar_url ? item.avatar_url : '@/static/resource/images/avatar.jpg'" mode="aspectFill"></image>
      </view>
      <view class="weui-cell_bd">
        <view >
          <text class="hosp-name">{{item.name}}</text>
        </view>
        <view class="hosp-line">
          <text class="hosp-rank">{{item.rank}}</text>
          <text class="hosp-label">{{item.label}}</text>
        </view>
        <view class="hosp-line">
          <text class="hosp-intro">{{item.intro}}</text>
        </view>
      </view>
    </view>
  </view>


</template>


// 组合式api
<script setup>
// ref 是基本类型， reactive 是引用类型
import { ref ,reactive , toRaw } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 轮播图
const slides =
    ref([{"pic_image_url":"http://159.75.169.224/uploads/20231105/6a284b70666a936caca0af7f8268c9d8.jpg"},
      {"pic_image_url":"http://159.75.169.224/uploads/20231105/80221cd6111536ab328cda2ea0eef452.jpg"}]);
// 两个快捷入口
const nav2s = ref([{"pic_image_url":"http://159.75.169.224/uploads/20231105/299ec231895953ff27de0f63c7703f6b.png","stype": 1,"stype_link":"/pages/mine/info/index"},
  {"pic_image_url":"http://159.75.169.224/uploads/20231105/ac905fd8f9f1ca96ce614f0960a74820.png","stype": 1,"stype_link":"/pages/mine/info/index"}]);

const navs = ref([{"pic_image_url":"http://159.75.169.224/uploads/20231105/299ec231895953ff27de0f63c7703f6b.png","title":"代跑取药"},
  {"pic_image_url":"http://159.75.169.224/uploads/20231105/ac905fd8f9f1ca96ce614f0960a74820.png","title":"上门助浴"},
  {"pic_image_url":"http://159.75.169.224/uploads/20231105/299ec231895953ff27de0f63c7703f6b.png","title":"服务3"},
  {"pic_image_url":"http://159.75.169.224/uploads/20231105/ac905fd8f9f1ca96ce614f0960a74820.png","title":"服务4"},
  {"pic_image_url":"http://159.75.169.224/uploads/20231105/299ec231895953ff27de0f63c7703f6b.png","title":"服务5"}]);

// 列表
const hospitals = ref([{"id":1,"name":"医院1","avatar_url":"http://159.75.169.224/uploads/20231105/6a284b70666a936caca0af7f8268c9d8.jpg","rank":"三级甲等","label":"综合医院","intro":"医院1简介"},
  {"id":2,"name":"医院2","avatar_url":"http://159.75.169.224/uploads/20231105/80221cd6111536ab328cda2ea0eef452.jpg","rank":"三级甲等","label":"综合医院","intro":"医院2简介"},
  {"id":3,"name":"医院3","avatar_url":"http://159.75.169.224/uploads/20231105/6a284b70666a936caca0af7f8268c9d8.jpg","rank":"三级甲等","label":"综合医院","intro":"医院3简介"},
  {"id":4,"name":"医院4","avatar_url":"http://159.75.169.224/uploads/20231105/80221cd6111536ab328cda2ea0eef452.jpg","rank":"三级甲等","label":"综合医院","intro":"医院4简介"}]);


// 跳转服务列表
const onNav2Tap = (e) =>{
  const nav =	toRaw(nav2s.value)[e.currentTarget.dataset.index]
  console.log("nav对象中的值："  +  nav.stype + "link:" + nav.stype_link )
  jump(nav,'nav2')
}
// 跳转服务列表
const onNavTap = (e) => {
  const nav =	toRaw(navs.value)[e.currentTarget.dataset.index]
  jump(nav,'navs')
}

const jump = (nav,type) =>{
  //判断是否为内部链接
  //switchTab 可以跳转菜单页面  navigateTo 可以跳转非菜单页面
  if(nav.stype  == 1){
    uni.navigateTo({
      url:nav.stype_link
    })
  }
}

</script>


<style>
.content {
  display: flex; /*  启用 Flexbox 布局。*/
  flex-direction: column;  /* 子元素垂直排列。*/
  align-items: center; /* 子元素在水平方向上居中对齐。*/
  justify-content: center; /* 子元素在垂直方向上居中对齐。*/
}
.index-swiper{
  padding: 20rpx 20rpx 0 20rpx;
  overflow: hidden;
}

.index-swiper swiper{
  height: 320rpx;
  overflow: hidden;
  border-radius: 10rpx;
}
.index-swiper swiper-item image{
  width: 100%;
  height: 100%;
}

.nav2-list {
  margin: 10rpx 20rpx 0 20rpx;
}
.nav2-list::after {
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}
.nav2-item {
  float: left;
  margin-top: 20rpx;
  width: 50%;
  text-align: center;
  box-sizing: border-box;
  padding: 0 5rpx;
}
.nav2-pic {
  width: 100%;
}
.nav2-pic image {
  display: block;
  width: 100%;
}
.nav-list::after {
  content: '';
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}
.nav-item {
  float: left;
  margin-top: 20rpx;
  width: 20%;
  text-align: center;
  padding: 10rpx 0;
}
.nav-pic image {
  display: block;
  margin: 0 auto;
  width: 110rpx;
  height: 110rpx;
}
.nav-text {
  font-size: 24rpx;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.hosp-list {
  margin: 10rpx 0 0 0;
  background: none;
}
.hosp-list::before {
  display: none;
}
.hosp-list::after {
  display: none;
}

.hosp-item {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}
.hosp-item::before {
  display: none;
}
.hosp-item::after {
  display: none;
}
.hosp-name {
  font-weight: bold;
  font-size: 34rpx;
}
.hosp-avatar {
  display: block;
  width: 200rpx;
  height: 180rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 20rpx;
}
.hosp-line {
  margin-top: 5rpx;
}
.hosp-line text {
  font-size: 26rpx;
}
.hosp-rank {
  font-weight: bold;
  color: #0bb585;
  margin-right: 15rpx;
}
.hosp-label {
  font-weight: bold;
  color: #0ca7ae;
  margin-right: 15rpx;
}
.hosp-intro {
  color: #999999;
}

</style>
